﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <title>Rukada - Responsive Bootstrap4  Admin Dashboard Template</title>
  <!--favicon-->
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
  <!-- simplebar CSS-->
  <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
  <!-- Bootstrap core CSS-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- animate CSS-->
  <link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
  <!-- Icons CSS-->
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
  <!-- Sidebar CSS-->
  <link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
  <!-- Custom Style-->
  <link href="assets/css/app-style.css" rel="stylesheet"/>
  
</head>

<body>

<!-- Start wrapper-->
 <div id="wrapper">
 
   <!--Start sidebar-wrapper-->
   <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
     <div class="brand-logo">
      <a href="index.html">
       <img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
       <h5 class="logo-text">Rukada Admin</h5>
     </a>
   </div>
   <ul class="sidebar-menu do-nicescrol">
      <li class="sidebar-header">MAIN NAVIGATION</li>
      <li>
        <a href="index.html" class="waves-effect">
          <i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="index.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v1</a></li>
          <li><a href="index2.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v2</a></li>
          <li><a href="index3.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v3</a></li>
          <li><a href="index4.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v4</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-layers"></i>
          <span>UI Elements</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
        <li><a href="ui-checkbox-radio.html"><i class="zmdi zmdi-star-outline"></i> Checkboxes & Radios</a></li>
        <li><a href="ui-nav-tabs.html"><i class="zmdi zmdi-star-outline"></i> Nav Tabs</a></li>
        <li><a href="ui-accordions.html"><i class="zmdi zmdi-star-outline"></i> Accordions</a></li>
        <li><a href="ui-modals.html"><i class="zmdi zmdi-star-outline"></i> Modals</a></li>
        <li><a href="ui-typography.html"><i class="zmdi zmdi-star-outline"></i> Typography</a></li>
        <li><a href="ui-list-groups.html"><i class="zmdi zmdi-star-outline"></i> List Groups</a></li>
        <li><a href="ui-bootstrap-elements.html"><i class="zmdi zmdi-star-outline"></i> BS Elements</a></li>
        <li><a href="ui-pagination.html"><i class="zmdi zmdi-star-outline"></i> Pagination</a></li>
        <li><a href="ui-alerts.html"><i class="zmdi zmdi-star-outline"></i> Alerts</a></li>
        <li><a href="ui-progressbars.html"><i class="zmdi zmdi-star-outline"></i> Progress Bars</a></li>
        <li><a href="ui-notification.html"><i class="zmdi zmdi-star-outline"></i> Notifications</a></li>
        <li><a href="ui-sweet-alert.html"><i class="zmdi zmdi-star-outline"></i> Sweet Alerts</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-gamepad"></i> <span>BS Cards</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="cards-image-cards.html"><i class="zmdi zmdi-star-outline"></i> Image Cards</a></li>
          <li><a href="cards-text-cards.html"><i class="zmdi zmdi-star-outline"></i> Text Cards</a></li>
          <li><a href="cards-profile-cards.html"><i class="zmdi zmdi-star-outline"></i> Profile Cards</a></li>
          <li><a href="cards-social-cards.html"><i class="zmdi zmdi-star-outline"></i> Social Cards</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-cloud-done"></i> <span>Buttons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="buttons-default-button.html"><i class="zmdi zmdi-star-outline"></i> Default Button</a></li>
          <li><a href="buttons-dropdown-buttons.html"><i class="zmdi zmdi-star-outline"></i> Dropdown Buttons</a></li>
          <li><a href="buttons-group-buttons.html"><i class="zmdi zmdi-star-outline"></i> Group Buttons</a></li>
          <li><a href="buttons-icon-buttons.html"><i class="zmdi zmdi-star-outline"></i> Icon Buttons</a></li>
          <li><a href="buttons-outline-buttons.html"><i class="zmdi zmdi-star-outline"></i> Outline Buttons</a></li>
          <li><a href="buttons-social-buttons.html"><i class="zmdi zmdi-star-outline"></i> Social Buttons</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-card-travel"></i>
          <span>Components</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="components-range-slider.html"><i class="zmdi zmdi-star-outline"></i> Range Sliders</a></li>
          <li><a href="components-image-carousel.html"><i class="zmdi zmdi-star-outline"></i> Image Carousels</a></li>
          <li><a href="components-grid-layouts.html"><i class="zmdi zmdi-star-outline"></i> Grid Layouts</a></li>
          <li><a href="components-tree-view-menu.html"><i class="zmdi zmdi-star-outline"></i> Tree View</a></li>
          <li><a href="components-nestable.html"><i class="zmdi zmdi-star-outline"></i> Nesteble</a></li>
          <li><a href="components-switcher-buttons.html"><i class="zmdi zmdi-star-outline"></i> Switcher Buttons</a></li>
          <li><a href="components-pricing-table.html"><i class="zmdi zmdi-star-outline"></i> Pricing Tables</a></li>
          <li><a href="components-vertical-timeline.html"><i class="zmdi zmdi-star-outline"></i> Vertical Timeline</a></li>
          <li><a href="components-horizontal-timeline.html"><i class="zmdi zmdi-star-outline"></i> Horizontal Timeline</a></li>
          <li><a href="components-fancy-lightbox.html"><i class="zmdi zmdi-star-outline"></i> Fancy Lightbox</a></li>          
          <li><a href="components-color-palette.html"><i class="zmdi zmdi-star-outline"></i> Color Palette</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-chart"></i> <span>Charts</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="charts-chartjs.html"><i class="zmdi zmdi-star-outline"></i> Chart JS</a></li>
          <li><a href="charts-morris.html"><i class="zmdi zmdi-star-outline"></i> Morris Charts</a></li>
          <li><a href="charts-sparkline.html"><i class="zmdi zmdi-star-outline"></i> Sparkline Charts</a></li>
          <li><a href="charts-peity.html"><i class="zmdi zmdi-star-outline"></i> Peity Charts</a></li>
          <li><a href="charts-c3-charts.html"><i class="zmdi zmdi-star-outline"></i> C3 Charts</a></li>
          <li><a href="charts-other.html"><i class="zmdi zmdi-star-outline"></i> Other Charts</a></li>
          <li><a href="charts-flot.html"><i class="zmdi zmdi-star-outline"></i> Flot Chart</a></li>
        </ul>
       </li>
      <li>
        <a href="calendar.html" class="waves-effect">
          <i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
          <small class="badge float-right badge-info">New</small>
        </a>
      </li>
    
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-email"></i>
          <span>Mailbox</span>
           <small class="badge float-right badge-warning">12</small>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="mail-inbox.html"><i class="zmdi zmdi-star-outline"></i> Inbox</a></li>
          <li><a href="mail-compose.html"><i class="zmdi zmdi-star-outline"></i> Compose</a></li>
          <li><a href="mail-read.html"><i class="zmdi zmdi-star-outline"></i> Read Mail</a></li>
        </ul>
      </li>
      
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="form-inputs.html"><i class="zmdi zmdi-star-outline"></i> Basic Inputs</a></li>
          <li><a href="form-input-group.html"><i class="zmdi zmdi-star-outline"></i> Input Groups</a></li>
          <li><a href="form-layouts.html"><i class="zmdi zmdi-star-outline"></i> Form Layouts</a></li>
          <li><a href="form-advanced.html"><i class="zmdi zmdi-star-outline"></i> Form Advanced</a></li>
          <li><a href="form-uploads.html"><i class="zmdi zmdi-star-outline"></i> Form Uploads</a></li>
          <li><a href="form-validation.html"><i class="zmdi zmdi-star-outline"></i> Form Validation</a></li>
          <li><a href="form-step-wizard.html"><i class="zmdi zmdi-star-outline"></i> Form Wizard</a></li>
          <li><a href="form-text-editor.html"><i class="zmdi zmdi-star-outline"></i> Form Editor</a></li>
        </ul>
      </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-lock"></i> <span>Authentication</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="authentication-signin.html"><i class="zmdi zmdi-star-outline"></i> SignIn 1</a></li>
          <li><a href="authentication-signup.html"><i class="zmdi zmdi-star-outline"></i> SignUp 1</a></li>
          <li><a href="authentication-lock-screen.html"><i class="zmdi zmdi-star-outline"></i> Lock Screen</a></li>
          <li><a href="authentication-reset-password.html"><i class="zmdi zmdi-star-outline"></i> Reset Password 1</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="icons-font-awesome.html"><i class="zmdi zmdi-star-outline"></i> Font Awesome</a></li>
          <li><a href="icons-material-designs.html"><i class="zmdi zmdi-star-outline"></i> Material Design</a></li>
          <li><a href="icons-themify.html"><i class="zmdi zmdi-star-outline"></i> Themify Icons</a></li>
          <li><a href="icons-simple-line-icons.html"><i class="zmdi zmdi-star-outline"></i> Line Icons</a></li>
          <li><a href="icons-flags.html"><i class="zmdi zmdi-star-outline"></i> Flag Icons</a></li>
        </ul>
      </li>
    
       <li>
        <a href="widgets.html" class="waves-effect">
          <i class="zmdi zmdi-widgets"></i> <span>Widgets</span>
          <small class="badge float-right badge-danger">10</small>
        </a>
      </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-grid"></i> <span>Tables</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="table-simple-tables.html"><i class="zmdi zmdi-star-outline"></i> Simple Tables</a></li>
          <li><a href="table-header-tables.html"><i class="zmdi zmdi-star-outline"></i> Header Tables</a></li>
          <li><a href="table-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Color Tables</a></li>
          <li><a href="table-striped-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Striped Color Tables</a></li>
          <li><a href="table-data-tables.html"><i class="zmdi zmdi-star-outline"></i> Data Tables</a></li>
        </ul>
       </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-map"></i> <span>Maps</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="maps-google.html"><i class="zmdi zmdi-star-outline"></i> Google Maps</a></li>
          <li><a href="maps-vector.html"><i class="zmdi zmdi-star-outline"></i> Vector Maps</a></li>
        </ul>
       </li>
     
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-collection-folder-image"></i> <span>Sample Pages</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
              <li><a href="pages-invoice.html"><i class="zmdi zmdi-star-outline"></i> Invoice</a></li>
          <li><a href="pages-user-profile.html"><i class="zmdi zmdi-star-outline"></i> User Profile</a></li>
          <li><a href="pages-blank-page.html"><i class="zmdi zmdi-star-outline"></i> Blank Page</a></li>
              <li><a href="pages-coming-soon.html"><i class="zmdi zmdi-star-outline"></i> Coming Soon</a></li>
          <li><a href="pages-403.html"><i class="zmdi zmdi-star-outline"></i> 403 Error</a></li>
          <li><a href="pages-404.html"><i class="zmdi zmdi-star-outline"></i> 404 Error</a></li>
          <li><a href="pages-500.html"><i class="zmdi zmdi-star-outline"></i> 500 Error</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="fa fa-share"></i> <span>Multilevel</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
          <li>
            <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="sidebar-submenu">
              <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two</a></li>
              <li>
                <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="sidebar-submenu">
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
        </ul>
      </li>
      <li class="sidebar-header">LABELS</li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
    </ul>
   
   </div>
   <!--End sidebar-wrapper-->

<!--Start topbar header-->
<header class="topbar-nav">
 <nav class="navbar navbar-expand fixed-top bg-white">
  <ul class="navbar-nav mr-auto align-items-center">
    <li class="nav-item">
      <a class="nav-link toggle-menu" href="javascript:void();">
       <i class="icon-menu menu-icon"></i>
     </a>
    </li>
    <li class="nav-item">
      <form class="search-bar">
        <input type="text" class="form-control" placeholder="Enter keywords">
         <a href="javascript:void();"><i class="icon-magnifier"></i></a>
      </form>
    </li>
  </ul>
     
  <ul class="navbar-nav align-items-center right-nav-link">
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
      <i class="fa fa-envelope-open-o"></i><span class="badge badge-secondary badge-up">12</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 12 new messages
          <span class="badge badge-secondary">12</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-5.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Jhon Deo</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Today, 4:10 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-6.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Sara Jen</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Yesterday, 8:30 AM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-7.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Dannish Josh</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
             <small>5/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-8.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
            <small>1/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Messages</a></li>
        </ul>
        </div>
    </li>
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
    <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 14 Notifications
          <span class="badge badge-info">14</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-accounts fa-2x mr-3 text-primary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Registered Users</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-coffee fa-2x mr-3 text-success"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Received Orders</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-secondary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Updates</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-item language">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="#"><i class="flag-icon flag-icon-gb"></i></a>
      <ul class="dropdown-menu dropdown-menu-right">
          <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
        </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
        <span class="user-profile"><img src="assets/images/avatars/avatar-13.png" class="img-circle" alt="user avatar"></span>
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
       <li class="dropdown-item user-details">
        <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-13.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-2 user-title">Katrina Mccoy</h6>
            <p class="user-subtitle">mccoy@example.com</p>
            </div>
           </div>
          </a>
        </li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
      </ul>
    </li>
  </ul>
</nav>
</header>
<!--End topbar header-->

<div class="clearfix"></div>
	
  <div class="content-wrapper">
    <div class="container-fluid">
     <!-- Breadcrumb-->
     <div class="row pt-2 pb-2">
        <div class="col-sm-9">
		    <h4 class="page-title">Modal</h4>
		    <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javaScript:void();">Rukada</a></li>
            <li class="breadcrumb-item"><a href="javaScript:void();">UI Elements</a></li>
            <li class="breadcrumb-item active" aria-current="page">Modals</li>
         </ol>
	   </div>
	   <div class="col-sm-3">
       <div class="btn-group float-sm-right">
        <button type="button" class="btn btn-outline-primary waves-effect waves-light"><i class="fa fa-cog mr-1"></i> Setting</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown">
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a href="javaScript:void();" class="dropdown-item">Action</a>
          <a href="javaScript:void();" class="dropdown-item">Another action</a>
          <a href="javaScript:void();" class="dropdown-item">Something else here</a>
          <div class="dropdown-divider"></div>
          <a href="javaScript:void();" class="dropdown-item">Separated link</a>
        </div>
      </div>
     </div>
     </div>
    <!-- End Breadcrumb-->
	
	
	  <div class="demo-heading">Basic Bootstrap Modals</div>
	 
	  <div class="card">
	   <div class="card-body">
	    <div class="row">
           <div class="col-lg-4">
		     <!-- Default Size Modal -->
              <button class="btn btn-primary btn-block m-1" data-toggle="modal" data-target="#defaultsizemodal">Default Size Modal</button>
              <!-- Modal -->
                <div class="modal fade" id="defaultsizemodal">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
		   </div>
		   <div class="col-lg-4">
		     <!-- Large Size Modal -->
              <button class="btn btn-primary btn-block m-1" data-toggle="modal" data-target="#largesizemodal">Large Size Modal</button>
              <!-- Modal -->
                <div class="modal fade" id="largesizemodal">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
		   </div>
		   <div class="col-lg-4">
		     <!-- Small Size Modal -->
              <button class="btn btn-primary btn-block m-1" data-toggle="modal" data-target="#smallsizemodal">Small Size Modal</button>
              <!-- Modal -->
                <div class="modal fade" id="smallsizemodal">
                  <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-primary btn-sm" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
		   </div>
        </div><!--End Row-->

        
	
	  <div class="demo-heading">Header Color Modals</div>
	  
	   <div class="row">
        <div class="col-12 col-lg-4 col-xl-2">
		  <!--Primary Modal -->
               <button class="btn btn-outline-primary btn-block m-1" data-toggle="modal" data-target="#primarymodal">Primary</button>
                <div class="modal fade" id="primarymodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-primary">
                      <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-primary"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
		<div class="col-12 col-lg-4 col-xl-2">
		  <!--Secondary Modal -->
               <button class="btn btn-outline-secondary btn-block m-1" data-toggle="modal" data-target="#secondarymodal">Secondary</button>
                <div class="modal fade" id="secondarymodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-secondary">
                      <div class="modal-header bg-secondary">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-secondary" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-secondary"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
		<div class="col-12 col-lg-4 col-xl-2">
		   <!--Success  Modal -->
               <button class="btn btn-outline-success btn-block m-1" data-toggle="modal" data-target="#successmodal">Success</button>
                <div class="modal fade" id="successmodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-success">
                      <div class="modal-header bg-success">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-success" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
		<div class="col-12 col-lg-4 col-xl-2">
		  <!--Danger Modal -->
               <button class="btn btn-outline-danger btn-block m-1" data-toggle="modal" data-target="#dangermodal">Danger</button>
                <div class="modal fade" id="dangermodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-danger">
                      <div class="modal-header bg-danger">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-danger"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
		<div class="col-12 col-lg-4 col-xl-2">
		   <!--Warning Modal -->
               <button class="btn btn-outline-warning btn-block m-1" data-toggle="modal" data-target="#warningmodal">Warning</button>
                <div class="modal fade" id="warningmodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-warning">
                      <div class="modal-header bg-warning">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-warning"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
		<div class="col-12 col-lg-4 col-xl-2">
		  <!--Info Modal -->
               <button class="btn btn-outline-info btn-block m-1" data-toggle="modal" data-target="#infomodal">Info</button>
                <div class="modal fade" id="infomodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-info">
                      <div class="modal-header bg-info">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-info" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-info"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
		</div>
	   </div><!--End Row-->
	
	
	  <div class="demo-heading">Full Color Modals</div>
	  
		<div class="row">
			<div class="col-12 col-lg-4 col-xl-2">
			  <!--Primary Modal -->
               <button class="btn btn-primary btn-block m-1" data-toggle="modal" data-target="#fullprimarymodal">Primary</button>
                <div class="modal fade" id="fullprimarymodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-primary border-primary">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
			<div class="col-12 col-lg-4 col-xl-2">
			  <!--Secondary Modal -->
               <button class="btn btn-secondary btn-block m-1" data-toggle="modal" data-target="#fullsecondarymodal">Secondary</button>
                <div class="modal fade" id="fullsecondarymodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-secondary border-secondary">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
			<div class="col-12 col-lg-4 col-xl-2">
			 <!--Success  Modal -->
               <button class="btn btn-success btn-block m-1" data-toggle="modal" data-target="#fullsuccessmodal">Success</button>
                <div class="modal fade" id="fullsuccessmodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-success border-success">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
			<div class="col-12 col-lg-4 col-xl-2">
			  <!--Danger Modal -->
               <button class="btn btn-danger btn-block m-1" data-toggle="modal" data-target="#fulldangermodal">Danger</button>
                <div class="modal fade" id="fulldangermodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-danger border-danger">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
			<div class="col-12 col-lg-4 col-xl-2">
			  <!--Warning Modal -->
               <button class="btn btn-warning btn-block m-1" data-toggle="modal" data-target="#fullwarningmodal">Warning</button>
                <div class="modal fade" id="fullwarningmodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-warning border-warning">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
			<div class="col-12 col-lg-4 col-xl-2">
			   <!--Info Modal -->
               <button class="btn btn-info btn-block m-1" data-toggle="modal" data-target="#fullinfomodal">Info</button>
                <div class="modal fade" id="fullinfomodal">
                  <div class="modal-dialog">
                    <div class="modal-content bg-info border-info">
                      <div class="modal-header border-light-2">
                        <h5 class="modal-title text-white">Your modal title here</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body text-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer border-light-2">
                        <button type="button" class="btn btn-link text-white" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-link text-white"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div><!--End Modal -->
			</div>
		</div><!--End Row-->
		
		</div>
	 </div>

   <div class="demo-heading">Modal with UI Elements</div>
     <div class="card">
       <div class="card-body">
         <div class="row">
           <div class="col-lg-4">
         <!-- Default Size Modal -->
              <button class="btn btn-danger btn-block m-1" data-toggle="modal" data-target="#imagemodal">Modal with image</button>
              <!-- Modal -->
                <div class="modal fade" id="imagemodal">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <img src="assets/images/gallery/2.jpg" class="img-fluid rounded shadow" alt="Card image cap">
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-inverse-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-danger"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
       </div>
       <div class="col-lg-4">
         <!-- Large Size Modal -->
              <button class="btn btn-info btn-block m-1" data-toggle="modal" data-target="#formemodal">Modal with form</button>
              <!-- Modal -->
                <div class="modal fade" id="formemodal">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                          <form>
                             <div class="form-group">
                               <label for="input-1">Name</label>
                               <input type="text" class="form-control" id="input-1" placeholder="Enter Your Name">
                             </div>
                             <div class="form-group">
                               <label for="input-2">Email</label>
                               <input type="text" class="form-control" id="input-2" placeholder="Enter Your Email Address">
                             </div>
                             <div class="form-group">
                               <label for="input-3">Password</label>
                               <input type="text" class="form-control" id="input-3" placeholder="Enter Password">
                             </div>
                             <div class="form-group">
                               <div class="icheck-material-info">
                               <input type="checkbox" id="user-checkbox1" checked="">
                               <label for="user-checkbox1">Remember me</label>
                              </div>
                             </div>
                             <div class="form-group">
                              <button type="submit" class="btn btn-info shadow-info px-5"><i class="icon-lock"></i> Login</button>
                            </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
       </div>
       <div class="col-lg-4">
         <!-- Small Size Modal -->
              <button class="btn btn-dark btn-block m-1" data-toggle="modal" data-target="#cardmodal">Modal with BS Card</button>
              <!-- Modal -->
                <div class="modal fade" id="cardmodal">
                  <div class="modal-dialog">
                    <div class="modal-content border-0">
                        <div class="card mb-0">
                            <div id="carousel-2" class="carousel slide" data-ride="carousel">
                              <ol class="carousel-indicators">
                                <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-2" data-slide-to="1"></li>
                                <li data-target="#carousel-2" data-slide-to="2"></li>
                              </ol>
                              <div class="carousel-inner">
                                <div class="carousel-item active">
                                  <img class="d-block w-100 card-img-top" src="assets/images/gallery/8.jpg" alt="Card image cap">
                                </div>
                                <div class="carousel-item">
                                  <img class="d-block w-100 card-img-top" src="assets/images/gallery/9.jpg" alt="Card image cap">
                                </div>
                                <div class="carousel-item">
                                  <img class="d-block w-100 card-img-top" src="assets/images/gallery/10.jpg" alt="Card image cap">
                                </div>
                              </div>
                              <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                              </a>
                              <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                              </a>
                            </div>
                            <div class="card-body">
                              <h5 class="card-title text-dark">Card Sample title</h5>
                              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                             <ul class="list-group list-group-flush list shadow-none">
                              <li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-dark">14</span></li>
                              <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-success">2</span></li>
                              <li class="list-group-item d-flex justify-content-between align-items-center">Vestibulum at eros <span class="badge badge-danger">1</span></li>
                            </ul>
                            <div class="card-body">
                              <a href="javascript:void();" class="card-link">Card link</a>
                              <a href="javascript:void();" class="card-link">Another link</a>
                            </div>
                          </div>
                      
                    </div>
                  </div>
                </div>
          </div>
        </div><!--End Row-->
       </div>
     </div>
	
	
      <div class="row mt-4">
        <div class="col-lg-12">
          <div class="card">
           <div class="card-header text-uppercase">Modal With Animation</div>
            <div class="card-body">
              <table class="table"> 
                <thead> 
                    <tr> 
                        <th style="width:30%">Animation type</th> 
                        <th>Example</th> 
                    </tr> 
                </thead> 
                <tbody> 
                    <tr> 
                        <td class="middle-align">animated flipInX</td> 
                        <td> 
                           <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-1">SHOW ME</button>
                          </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated rollIn</td> 
                        <td> 
                             <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-2">SHOW ME</button>
                         </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated zoomInUp</td> 
                        <td> 
                             <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-3">SHOW ME</button>
                         </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated slideInUp</td> 
                        <td> 
                           <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-4">SHOW ME</button>
                       </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated rotateIn</td> 
                        <td> 
                           <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-5">SHOW ME</button>
                       </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated flip</td> 
                        <td> 
                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-6">SHOW ME</button>
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated lightSpeedIn</td> 
                        <td> 
                           <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-7">SHOW ME</button>
                       </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated swing</td> 
                        <td> 
                             <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-8">SHOW ME</button>
                         </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated wobble</td> 
                        <td> 
                             <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-9">SHOW ME</button>
                         </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated bounceIn</td> 
                        <td> 
                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-10">SHOW ME</button>
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated tada</td> 
                        <td> 
                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-11">SHOW ME</button>
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated jackInTheBox</td> 
                        <td> 
                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-12">SHOW ME</button>
                        </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated flash</td> 
                        <td> 
                           <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-13">SHOW ME</button>
                       </td> 
                    </tr> 
                    <tr> 
                        <td class="middle-align">animated fadeInUp</td> 
                        <td> 
                             <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#modal-animation-14">SHOW ME</button>
                         </td> 
                    </tr> 
                </tbody> 
            </table>

              
                <div class="modal fade" id="modal-animation-1">
                  <div class="modal-dialog">
                    <div class="modal-content animated flipInX">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                        
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-2">
                  <div class="modal-dialog">
                    <div class="modal-content animated rollIn">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-3">
                  <div class="modal-dialog">
                    <div class="modal-content animated zoomInUp">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-4">
                  <div class="modal-dialog">
                    <div class="modal-content animated slideInUp">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-5">
                  <div class="modal-dialog">
                    <div class="modal-content animated rotateIn">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

               
                <div class="modal fade" id="modal-animation-6">
                  <div class="modal-dialog">
                    <div class="modal-content animated flip">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-7">
                  <div class="modal-dialog">
                    <div class="modal-content animated lightSpeedIn">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-8">
                  <div class="modal-dialog">
                    <div class="modal-content animated swing">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="modal fade" id="modal-animation-9">
                  <div class="modal-dialog">
                    <div class="modal-content animated wobble">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-10">
                  <div class="modal-dialog">
                    <div class="modal-content animated bounceIn">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="modal fade" id="modal-animation-11">
                  <div class="modal-dialog">
                    <div class="modal-content animated tada">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
               
                <div class="modal fade" id="modal-animation-12">
                  <div class="modal-dialog">
                    <div class="modal-content animated jackInTheBox">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-13">
                  <div class="modal-dialog">
                    <div class="modal-content animated flash">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="modal-animation-14">
                  <div class="modal-dialog">
                    <div class="modal-content animated fadeInUp">
                      <div class="modal-header">
                        <h5 class="modal-title">Your modal title here</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dicta. Voluptate cumque odit quam velit maiores sint rerum, dolore impedit commodi. Tempora eveniet odit vero rem blanditiis, tenetur laudantium cumque.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div><!--End Row-->

    </div>
    <!-- End container-fluid-->
    
   </div><!--End content-wrapper-->
   <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->
	
	<!--Start footer-->
	<footer class="footer">
      <div class="container">
        <div class="text-center">
          Copyright © 2018 <a href="http://www.17sucai.com/">Rukada</a> Admin
        </div>
      </div>
    </footer>
	<!--End footer-->
   
  </div><!--End wrapper-->


  <!-- Bootstrap core JavaScript-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
	
  <!-- simplebar js -->
  <script src="assets/plugins/simplebar/js/simplebar.js"></script>
  <!-- waves effect js -->
  <script src="assets/js/waves.js"></script>
  <!-- sidebar-menu js -->
  <script src="assets/js/sidebar-menu.js"></script>
  <!-- Custom scripts -->
  <script src="assets/js/app-script.js"></script>
	
</body>
</html>
